import { List, Avatar, message, Drawer, } from 'antd';
import React, { useState, useEffect } from 'react';
import { request } from '../../utils/request.ts';
import '../CoachCertificate/index.css';

const Detail = ({ open, setOpen, record, }) => {
  const [list, setList] = useState([]);
  const [initLoading, setInitLoading] = useState(true);
  const pageSize = 20;
  const fetchList = async(nextPageNum = 1, searchCode = -1, searchCardId = -1,) => {
    setInitLoading(true);
    const data = {
      pageNum: nextPageNum,
      pageSize,
      cardId: searchCardId,
      code: searchCode || -1,
    };
    const res = await request('/api/studentCardDetail/pageList', {
      method: 'POST',
      data,
    });
    setInitLoading(false);
    if (res?.data) {
      setList(res?.data);
    } else {
      message.error(res?.msg);
    }
  };
  useEffect(() => {
    if (open) {
      fetchList(0, record?.code, record?.cardId,);
    }
  }, [open, record]);
  return (
    <>
      <Drawer
        title="认证批次详情"
        open={open}
        onClose={() => setOpen(false)}
        width={'80%'}
        submitter={false}
        layout="horizontal"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 12 }}
      >
        <List
          className="coach-certificate-list"
          loading={initLoading}
          itemLayout="horizontal"
          dataSource={list}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={
                  <>
                    <Avatar src={item?.pic} />
                  </>
                }
              />
              <ul className='content'>
                <li>{item.cardname}</li>
                <li>{item.birthday}({item.sex})</li>
                <li>{item.address}</li>
                <li>{item.mobilephone}<span className='email'>{item.email}</span></li>
              </ul>
            </List.Item>
          )}
        />
      </Drawer>
    </>
  );
};

export default Detail;
